import React, { FunctionComponent, useMemo } from "react";
import { useObserver } from "mobx-react-lite";
import Head from "next/head";
import { generate } from "@ant-design/colors";

interface IAppHeadProps {
    oemconfig: {
        [key: string]: any;
    };
}
export const AppHead: FunctionComponent<IAppHeadProps> = ({ oemconfig }) => {
    const colorPalette: string[] = useMemo(() => generate(oemconfig.theme || "#6775CD"), [oemconfig]);
    return useObserver(() => {
        return (
            <Head>
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no"
                />
                <meta http-equiv="X-UA-Compatible" content="IE=11" />
                <title>{oemconfig.product}</title>
                <link
                    rel="shortcut icon"
                    type="image/x-icon"
                    href={`data:image/png;base64,${oemconfig.favicon}`}
                ></link>
                {/* <link rel="stylesheet" type="text/css" href="/static/SourceHanSansCNNormalFont/fontblock.css" /> */}
                <style type="text/css">
                    {`
                        .as-components-oem-background-color {
                            background: ${colorPalette[5]} !important;
                            color: #ffffff !important;
                        }
                        .as-components-oem-background-color:hover {
                            background: ${colorPalette[4]} !important;
                        }
                        .as-components-oem-background-color:active {
                            background: ${colorPalette[6]} !important;
                        }
                        .as-components-oem-background-color[disabled], .as-components-oem-background-color.disabled {
                            background: ${colorPalette[3]} !important;
                            color: #ffffff !important;
                        }
                    `}
                </style>
            </Head>
        );
    });
};
